<template>
   <div>
       <div class="DiscussCount">Discuss | {{ArticleDetail?.extra?.discusscount}}条留言</div>
       <!-- 评论内容 -->
       <div class="box" >
          <!-- 动画效果 -->
         <transition v-for="item in DiscussData" :key="item.id" class="box" name="leftToRight"> 
           <div class="box" v-if="item && item.deleted == 0">
               <DiscussInfo :discuss="item" class="DiscussOne flex" />

               <!-- 回复 -->
               <div class="replyBack" v-if="item.reply?.length>0">
                  <transition v-for="replyOne in item.reply" :key="replyOne.id" class="box" name="leftToRight"> 
                     <DiscussInfo :discuss="replyOne"  class="DiscussOne flex" v-if=" replyOne?.deleted == 0"/>
                  </transition>
                  <!-- 查看更多回复 -->
                  <button class="replyCount overflow" v-if=" item.reply && item.replyCount > item.reply?.length"  @click="REPLYON(item)">
                     查看更多回复
                  </button>
               </div>
           </div>

        </transition>
    </div>
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import DiscussInfo from '../DiscussInfo/DiscussInfo.vue'
  export default 
  {
     components: { DiscussInfo },
     name :'', 
     computed:{
       ...mapState('ArticleDetail',['ArticleDetail']), //文章详情 
       ...mapState('Discuss',['DiscussData']), //评论数据 
     },
     methods:{
        ...mapActions('Discuss',['getDiscuss','deleteDiscuss']), //得到评论 删除评论
        ...mapMutations('Discuss',['DISCUSSON','REPLYON']), //评论窗口出现
          init(){ //加载动画
            let NewDiscussData = this.DiscussData.filter(item => item.deleted == 1)
            NewDiscussData.forEach((item,index) => { 
                  let time = setTimeout(() => {
                     item.deleted = 0
                     clearTimeout(time)
                  }, 100 * index);       
            });
          },
          
     },
     watch:{
        DiscussData(){
          this.init()
        }
     },
     mounted() {
       this.init()
     },
    
  }
</script>
<style scoped lang='less'>
@media screen and (max-width: 600px) {
   div .replyBack{
      width: 100%;
      margin-left: 0;
   }
 }
 
.box{
   width: 100%;
   overflow: hidden;
}
.DiscussCount{
   width: 100%;
   font-size: 20px;
   color: #4D4D4D;  
   letter-spacing: 0;
   transition-duration: 0.5s;
}
.DiscussOne{
   width: 100%;
   padding: 5px;
   box-sizing: border-box;
   margin-top: 5px;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: nowrap;
}

.replyBack{
   width: calc(100% - 80px);
   margin-left: 80px;
   padding: 20px 10px;
   box-sizing: border-box;
   border-radius: 5px;
   background: rgba(255, 255, 255, 0.2);
   margin-top: 10px;
   overflow: hidden;
}

.replyCount{
     width: 100%;
     text-align: right;
     color: orangered;
     font-weight: 600;
     font-size: 16px; 
     letter-spacing: 0;
     padding: 30px 30px 0 0;
     box-sizing: border-box;
}


   


</style>